2021-05-20
En CSS-regel inleds med en selektor som talar om för vilket eller vilka HTML-element som regeln gäller (Duckett, 2011 : 231). Det finns flera olika selektorer beroende på vilket eller vilka HTML-element man vill rikta in sig på (Duckett, 2011 : 237). Typselek-torer består t.ex. av namnet på HTML-elementet och gäller för alla element med detta namn i dokumentet (Duckett, 2011 : 238). Egenskapen i en CSS-regel är den egenskap för selektorn (resp. HTML-elementet) som man vill påverka (Duckett, 2011 : 232). Egenskapen följs av ett värde som specificerar elementets egenskap (ibid.). I den följande CSS-regeln ändrar jag marginalen runt ett (eller flera) stycken: p { margin: 20px auto 20px auto; }. Selektorn är här ”p”, dvs. ”paragraph”, stycke. Därefter följer egenskapen ”margin” och värdet har jag satt till 20 pixlar över och under stycket och automatiskt för höger och vänster.
Står för ”hue saturation lightness” resp. ”hue saturation lightness alpha” och är ett nytt sätt att specificera färg i CSS3 baserat på färgton, mättnad, ljushet och genomskinlighet (Duckett, 2011 : 255-256). Värdet inleds med ”hls” och följs av ett värde för färgton (en vinkelgrad mellan 0 och 360), ett värde för mättnad och ett värde för ljushet (båda i procent) (Duckett, 2011 : 256). Man kan även specificera ett värde för genomskinlighet och inleder då med ”hsla” följt av färgton, mättnad, ljushet och genomskinlighet (det sistnämnda anges med ett decim-altal mellan 0 och 1,0) (ibid.). Värdena för färgton, mättnad, ljushet och genomskinlighet skrivs inom parenteser (ibid.).
En id-selektor används för att välja HTML-element baserat på deras id-attribut [14]. En id-selektor kan endast peka mot ett element per sida eftersom id-attributet är unikt per HTML-dokument [14]. Id-selektorer inleds med nummertecken [14]. Exemplet nedan gäller innehållet på startsidan med alla blogginlägg (ej header och footer). Denna box har fått ett id-attribut med värdet ”blog” och jag använder värdet för att centrera just denna box mitt på sidan. #blog { margin: 20px auto; }. Class-selektorer inleds med en punkt och väljer ut HTML-element med class-attribut [14]. Flera element på en sida kan ha samma class-attribut [14]. På startsidan har jag använt ett class-attribut på styckena som innehåller datumen: .datum { font-style: italic; } Dessa tre stycken med samma class-attribut har jag alltså kursiverat.